<template>
  <ma-crud ref="crudRef" :columns="columns" :options="crud">
    <template #search-categoryName="{ searchForm, component }">
      <a-input
        v-model.trim="searchForm[component.dataIndex]"
        :style="{ width: '240px' }"
        allow-clear
        placeholder="请输入分类名称"
      >
        <template #prefix>
          <icon-search />
        </template>
      </a-input>
    </template>
    <template #operationAfterExtend="{ record }">
      <a-link v-hasPermi="['system:category:add']" @click="handleAdd(record)">添加下级</a-link>
    </template>
  </ma-crud>
</template>

<script lang="ts" setup>
import { addCategory, delCategory, listCategory, updateCategory } from "@/api/system/category";
import { CategoryVO } from "@/api/system/category/types";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const crudRef = ref();

const crud = reactive({
  id: "categoryId",
  pk: "categoryId",
  title: "分类查询",
  formLayout: "vertical",
  formOption: {
    width: 670,
    layout: [
      {
        formType: "grid",
        gutter: 16,
        cols: [
          { span: 12, formList: [{ dataIndex: "parentId" }] },
          { span: 12, formList: [{ dataIndex: "categoryName" }] },
          { span: 12, formList: [{ dataIndex: "categoryCode" }] },
          { span: 12, formList: [{ dataIndex: "remark" }] }
        ]
      }
    ]
  },
  api: listCategory,
  showIndex: false,
  operationColumn: true,
  operationColumnAlign: "center",
  operationColumnWidth: 200,
  pageLayout: "normal",
  requestParams: { orderBy: "createTime", orderType: "desc" },
  add: { api: addCategory, auth: ["system:category:add"], text: "新增", show: true },
  edit: { api: updateCategory, auth: ["system:category:edit"], text: "编辑", show: true },
  delete: { api: delCategory, auth: ["system:category:delete"], text: "删除", show: true },
  isExpand: true,
  beforeOpenEdit: (record: any) => {
    if (record.leader) {
      record.leader = record.leader.toString().split(",");
    }
    return true;
  },
  afterRequest: (tableData: any) => {
    // @ts-ignore
    return proxy?.handleTree<CategoryVO>(tableData, "categoryId");
  }
});

const columns = reactive([
  {
    title: "上级分类",
    dataIndex: "parentId",
    align: "left",
    formType: "tree-select",
    hide: true,
    dict: {
      url: "/system/category/getTreeSelect",
      props: {
        key: "id",
        title: "label"
      }
    }
  },
  {
    title: "分类名称",
    dataIndex: "categoryName",
    align: "left",
    search: true,
    commonRules: {
      required: true,
      message: "分类名称不能为空"
    }
  },
  {
    title: "分类编码",
    dataIndex: "categoryCode",
    align: "center",
    commonRules: {
      required: true,
      message: "分类编码不能为空"
    }
  },
  {
    dataIndex: "remark",
    title: "描述",
    formType: "textarea",
    autoSize: { minRows: 3, maxRows: 6 },
    maxLength: 200,
    showWordLimit: true
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    align: "center",
    addDisplay: false,
    editDisplay: false
  }
]);
const handleAdd = async (row?: CategoryVO) => {
  await crudRef.value?.addAction();
  crudRef.value.crudFormRef.form.parentId = row?.categoryId;
};
</script>
